<template>
  <f7-page>
    <f7-navbar title="顾客信息录入" back-link="Back"></f7-navbar>
    <f7-list class="search-list" >
       <a href="#" class="item-link item-content">
        <div class="item-inner item-cell">
          <div class="item-row">
            <div class="item-cell">入住顾客</div>
            <div class="item-col"   width="33">
              <div class="item-cell"></div>
              <div class="item-cell"></div>
            </div>
          </div>
        </div>
      </a>
      <!-- <f7-list-item link="/customeradd/"  header="入住顾客" after="">
      </f7-list-item> -->
    </f7-list>
    <f7-list class="search-list1" inline-labels no-hairlines-md >
      <f7-list-input label="房型" type="select" defaultValue="Male" :value="type"
        @input="type = $event.target.value" >
        <option :value="type.type" v-for="(type, index) in object" :key="index">{{type.type}}</option>
      </f7-list-input>
    </f7-list>
    <f7-list class="search-list2" inline-labels no-hairlines-md>
      <f7-list-input label="联系方式" type="tel" placeholder="Your phone number"  clear-button>
      </f7-list-input>
    </f7-list>
    <f7-block strong class="queding">
      <f7-button fill raised href="/chooseroom/">确定</f7-button>
    </f7-block>
  </f7-page>
</template>
<style scoped>
.queding {
  top: 20%;
}
</style> 
<script>
import axios from "axios";
export default {
  data() {
    return {
      type:"",
      object: [],
      id: null
    };
  },
mounted() {
    this.selectRoomType();
  },
  methods: {
    selectRoomType() {
       const self = this;
      const app = self.$f7;
      URL = "/caofuying/Room/selectRoomType";
      axios.get(URL, {}).then(r => {
        const { data } = r;
        if (data != null) {
          this.object = data;
        }else{
          app.dialog.alert("服务器错误")
        }
      });
    },
  }
}
</script>
